{% if isFramework("vue") %}
```js
const KEY_LEFT = 'ArrowLeft';
const KEY_UP = 'ArrowUp';
const KEY_RIGHT = 'ArrowRight';
const KEY_DOWN = 'ArrowDown';
const KEY_PAGE_UP = 'PageUp';
const KEY_PAGE_DOWN = 'PageDown';
const KEY_PAGE_HOME = 'Home';
const KEY_PAGE_END = 'End';

const MyCellEditor = {
    template: `<input v-model="value" @keydown="onKeyDown" />`,
    data() {
        return {
            value: null
        };
    },
    methods: {
        /* Component Editor Lifecycle method */
        getValue() {
            return this.value;
        },
        
        onKeyDown(event) {
            const key = event.key;

            const isNavigationKey = key === KEY_LEFT ||
                key === KEY_RIGHT ||
                key === KEY_UP ||
                key === KEY_DOWN ||
                key === KEY_PAGE_DOWN ||
                key === KEY_PAGE_UP ||
                key === KEY_PAGE_HOME ||
                key === KEY_PAGE_END;

                if (isNavigationKey) {
                    // this stops the grid from receiving the event and executing keyboard navigation
                    event.stopPropagation();
                }
        }
    },
    mounted() {
        this.value = this.params.value;
    }
}
```
{% /if %}
